import React, { PureComponent } from 'react';
import {
    HeaderWrapper, Logo, Nav, NavItem, NavSearch, Addition, Btn, SearchWrapper, SearchInfo, SearchInfoTitle,
    SearchInfoSwitch, SearchInfoItem, SearchInoList
} from './style';
import { CSSTransition } from 'react-transition-group';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import { chageLogout } from '../../pages/Login/store/actionCreators';
import { Link } from 'react-router-dom';

class Header extends PureComponent {
    //当搜索框聚焦的时候返回SearchInfo组件
    getSearchInfo = () => {
        const { focused, list, page, mouseIn, totalPage, handleEnter, handleLeave, handleChangePage } = this.props;
        const listJS = list.toJS();
        const pageList = [];
        for (let i = (page - 1) * 10; i < page * 10; i++) {
            if (listJS[i]) {
                pageList.push(
                    <SearchInfoItem key={listJS[i]}>
                        {listJS[i]}
                    </SearchInfoItem>)
            }
        }
        if (focused || mouseIn) {
            return (
                <SearchInfo
                    onMouseEnter={handleEnter}
                    onMouseLeave={handleLeave}>
                    <SearchInfoTitle>热门搜索
                <SearchInfoSwitch onClick={() => {
                            handleChangePage(page, totalPage, this.icon)
                        }}>
                            <span className="iconfont spin"
                                ref={(icon) => { this.icon = icon }}>&#xe851;</span>
                        换一批
                </SearchInfoSwitch>
                    </SearchInfoTitle>
                    <SearchInoList>
                        {
                            pageList
                        }
                    </SearchInoList>
                </SearchInfo>)
        } else {
            return null
        }
    }
    render() {
        const { focused, handleFocus, handleBlur, list, login, handleLogout } = this.props;
        return (
            (
                <HeaderWrapper>
                    <Link to='/'>
                        <Logo />
                    </Link>
                    <Nav>
                        <NavItem className="left active" >首页</NavItem>
                        <NavItem className="left" >下载App</NavItem>
                        {
                            login ?
                                <NavItem className="right" onClick={handleLogout}>退出</NavItem> : <Link to='/login'>
                                    <NavItem className="right" >登陆</NavItem>
                                </Link>
                        }

                        <NavItem className="right iconfont" >&#xe601;</NavItem>
                        <SearchWrapper>
                            {/* {搜索框动画效果} */}
                            <CSSTransition
                                in={focused}
                                timeout={200}
                                classNames="slide">
                                <NavSearch
                                    onFocus={() => {
                                        handleFocus(list)
                                    }}
                                    onBlur={handleBlur}
                                    className={focused ? 'focused' : ''}
                                ></NavSearch>
                            </CSSTransition>
                            <span className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe631;
                            </span>
                            {this.getSearchInfo()}
                        </SearchWrapper>
                    </Nav>
                    <Addition>
                        <Link to='/write'>
                            <Btn className="wri">
                                <span className="iconfont">&#xe615;</span>
                                写文章
                        </Btn>
                        </Link>
                        <Btn className="reg">注册</Btn>
                    </Addition>
                </HeaderWrapper>
            )
        )
    }
}

// 将store.state中的focused映射到Header中的focused
const mapStateToProps = (state) => {
    return {
        focused: state.get('header').get('focused'),
        list: state.get('header').get('list'),
        page: state.get('header').get('page'),
        mouseIn: state.get('header').get('mouseIn'),
        totalPage: state.get('header').get('totalPage'),
        login: state.get('login').get('login'),
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        // 当搜索框获得焦点时设置focused为true
        handleFocus(list) {
            dispatch(actionCreators.getFocus());
            // 如果list没有内容时才发送请求
            if (list.size === 0) {
                dispatch(actionCreators.getList())
            }
        },
        // 当搜索框失去焦点时设置focused为false
        handleBlur() {
            const action = actionCreators.getBlur();
            dispatch(action)
        },
        //当鼠标进入“热门搜索”时将mouseIn设置成true
        handleEnter() {
            const action = actionCreators.getEnter();
            dispatch(action)
        },
        //当鼠标离开“热门搜索”时将mouseIn设置成false
        handleLeave() {
            const action = actionCreators.getLeave();
            dispatch(action)
        },
        //当点击“换一批”时将page的值加一，并且让图标旋转360度
        handleChangePage(page, totalPage, spin) {
            let originDdg = spin.style.transform.replace(/\D/ig, '')
            if (originDdg) {
                originDdg = parseInt(originDdg);
            }
            spin.style.transform = `rotate(${originDdg + 360}deg)`
            if (page < totalPage) {
                const action = actionCreators.getPage(page + 1);
                dispatch(action)
            } else {
                const action = actionCreators.getPage(1);
                dispatch(action);
            }
        },
        // 当点击“退出”时将登陆状态改为“退出”
        handleLogout() {
            const action = chageLogout();
            dispatch(action);
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);
